﻿window.onload = () => {
    var div = document.getElementById("drawarea") as HTMLDivElement;
    var app = new QuickApp(div);
    app.start(new MyState());
}





class MyState implements IState {

    app: QuickApp;
    texture: lighttool.spriteTexture;

    timer: number = 0;
    radius: number;
    points: Array<MyCoordinates> = new Array<MyCoordinates>();
    onInit(app: QuickApp) {

        this.app = app;
        this.texture = new lighttool.spriteTexture(app.webgl, "res/a.png");
        this.radius = this.app.centerx/4;

        for (var i = 0; i < 1; i++){

            //粒子创建并添加到数组
          
            this.points.push(TriangleLengthXY(new MyCoordinates(this.app.centerx, this.app.centery),20,50));

        }
    }

    texArea: lighttool.spriteRect = new lighttool.spriteRect();

    onUpdate(delta: number) {

        this.timer += delta;

        //for (var i = 0; i < this.points.length; i++){

            var p = this.points[0];


            //var x = p.x + radius * Math.cos(this.timer) / 4;
            //var y = p.y + radius * Math.sin(this.timer) / 4;

            var x = p.x;
            var y = p.y;

            this.app.drawByCenterRotate(20, x, y, 0, this.texture, lighttool.spriteColor.white);
            //this.app.drawByCenter(this.app.half * 0.01, this.app.centerx + p.x, this.app.centery + p.y, this.texture, lighttool.spriteColor.white);

            this.texArea.x = this.app.centerx - this.app.half;
            this.texArea.y = this.app.centery - this.app.half;
            this.texArea.w = this.app.half * 2;
            this.texArea.h = this.app.half * 0.2;
            this.app.font.drawText(this.app.sb, "x=" + x, this.texArea);
       // }

    }

    onExit() {

    }
}





//框架代码
interface IState {
    onInit(app: QuickApp);
    onUpdate(delta: number);
    onExit();
}
class QuickApp {
    curState: IState = null;
    changeState(s: IState) {
        if (this.curState != null) {
            this.curState.onExit();
        }
        this.curState = s;
        if (this.curState != null) {
            this.curState.onInit(this);
        }
    }
    divParent: HTMLDivElement;
    webgl: WebGLRenderingContext;
    sb: lighttool.spriteBatcher;
    font: lighttool.spriteFont;
    centerx: number;
    centery: number;
    half: number;
    pointbuf: lighttool.spritePoint[] = [
        { x: 0, y: 0, z: 0, r: 0, g: 0, b: 0, a: 0, r2: 0, g2: 0, b2: 0, a2: 0, u: 0, v: 0 },
        { x: 0, y: 0, z: 0, r: 0, g: 0, b: 0, a: 0, r2: 0, g2: 0, b2: 0, a2: 0, u: 0, v: 0 },
        { x: 0, y: 0, z: 0, r: 0, g: 0, b: 0, a: 0, r2: 0, g2: 0, b2: 0, a2: 0, u: 0, v: 0 },
        { x: 0, y: 0, z: 0, r: 0, g: 0, b: 0, a: 0, r2: 0, g2: 0, b2: 0, a2: 0, u: 0, v: 0 },
    ];
    constructor(div: HTMLDivElement) {
        this.divParent = div;
    }
    start(startFirst: IState) {
        //append canvas
        var canvas = document.createElement("canvas");
        canvas.className = "full";
        canvas.style.position = "absolute";
        this.divParent.appendChild(canvas);
        //init webgl;
        this.webgl = <WebGLRenderingContext>canvas.getContext('webgl') ||
            <WebGLRenderingContext>canvas.getContext("experimental-webgl");

        //init 2d
        var shaderparser = new lighttool.shaderParser();
        shaderparser.parseUrl(this.webgl, "res/hud.shader.txt");

        this.sb = new lighttool.spriteBatcher(this.webgl, shaderparser);
        this.sb.ztest = false;

        this.font = new lighttool.spriteFont(this.webgl, "res/f1.font.txt",
            new lighttool.spriteTexture(this.webgl, "res/f1.png", lighttool.textureformat.GRAY, false, true));
        this.changeState(startFirst);
        this.update();

    }
    lasttime: number = Date.now();
    fpstimer: number = 0;
    framecount: number = 0;
    fps: number = 0;

    update() {
        var now: number = Date.now();
        var delta = (now - this.lasttime) / 1000.0; //用秒为delta的时间单位

        this.framecount++;
        this.fpstimer += delta;
        if (this.fpstimer > 1.0) {
            this.fps = this.framecount / this.fpstimer;
            this.fpstimer = 0;
            this.framecount = 0;
        }

        requestAnimationFrame(() => { this.update(); });
        if (this.webgl.canvas.width != this.divParent.clientWidth || this.webgl.canvas.height != this.divParent.clientHeight) {
            var width = this.divParent.clientWidth;
            var height = this.divParent.clientHeight;
            this.webgl.canvas.width = width;
            this.webgl.canvas.height = height;
            this.webgl.canvas.width = width;
            this.webgl.canvas.height = height;
            this.webgl.viewport(0, 0, width, height);
            //this.webgl.drawingBufferWidth = this.width;
            //this.webgl.drawingBufferHeight = this.height;
            var xscale = 1.0 * 2 / this.webgl.drawingBufferWidth;
            var yscale = 1 * -1 * 2 / this.webgl.drawingBufferHeight;
            var xadd = -1;
            var yadd = 1;
            this.sb.matrix = new Float32Array([
                xscale, 0, 0, 0,//去掉asp的影响
                0, yscale, 0, 0,
                0, 0, 1, 0,
                xadd, yadd, 0, 1
            ]);
            this.centerx = width / 2;
            this.centery = height / 2;
            this.half = Math.min(width / 2, height / 2);
        }

        this.webgl.clearColor(0.1, 0.5, 0.5, 1);
        this.webgl.clear(this.webgl.COLOR_BUFFER_BIT);

        if (this.curState != null) {
            this.curState.onUpdate(delta);
        }

        this.sb.endbatch();

        this.lasttime = now;

    }


    drawByCenter(half: number, x: number, y: number, tex: lighttool.spriteTexture, c: lighttool.spriteColor) {
        {
            let p = this.pointbuf[0];
            p.x = x - half; p.y = y - half; p.z = 0;
            p.u = 0; p.v = 0;
            p.r = c.r; p.g = c.g; p.b = c.b; p.a = c.a;

            p = this.pointbuf[1];
            p.x = x + half; p.y = y - half; p.z = 0;
            p.u = 1; p.v = 0;
            p.r = c.r; p.g = c.g; p.b = c.b; p.a = c.a;

            p = this.pointbuf[2];
            p.x = x - half; p.y = y + half; p.z = 0;
            p.u = 0; p.v = 1;
            p.r = c.r; p.g = c.g; p.b = c.b; p.a = c.a;

            p = this.pointbuf[3];
            p.x = x + half; p.y = y + half; p.z = 0;
            p.u = 1; p.v = 1;
            p.r = c.r; p.g = c.g; p.b = c.b; p.a = c.a;
        }
        this.sb.setMat(tex.mat);
        this.sb.addRect(this.pointbuf);

    }

    drawByCenterRotate(half: number, x: number, y: number, r: number, tex: lighttool.spriteTexture, c: lighttool.spriteColor) {
        {
            var sina = Math.sin(r);
            var cosa = Math.cos(r);

            let p = this.pointbuf[0];
            p.x = x + (-half * cosa + -half * -sina); p.y = y + (-half * sina + -half * cosa); p.z = 0;
            p.u = 0; p.v = 0;
            p.r = c.r; p.g = c.g; p.b = c.b; p.a = c.a;

            p = this.pointbuf[1];
            p.x = x + (half * cosa + -half * -sina); p.y = y + (half * sina + -half * cosa); p.z = 0;
            p.u = 1; p.v = 0;
            p.r = c.r; p.g = c.g; p.b = c.b; p.a = c.a;

            p = this.pointbuf[2];
            p.x = x + (-half * cosa + half * -sina); p.y = y + (-half * sina + half * cosa); p.z = 0;
            p.u = 0; p.v = 1;
            p.r = c.r; p.g = c.g; p.b = c.b; p.a = c.a;

            p = this.pointbuf[3];
            p.x = x + (half * cosa + half * -sina); p.y = y + (half * sina + half * cosa); p.z = 0;
            p.u = 1; p.v = 1;
            p.r = c.r; p.g = c.g; p.b = c.b; p.a = c.a;
        }
        this.sb.setMat(tex.mat);
        this.sb.addRect(this.pointbuf);

    }

}